$(document).ready(function() {
    var slider = $('#images');
    var background = ['orange', 'red', 'blue', 'black'];
    var i = 0;
    var timer = setInterval(function() {
        i++;
        if (i == background.length) i = 0; 
        slider.fadeOut(500, function() {
            slider.css('background-color', background[i]); 
        }); 
        slider.fadeIn(2000);  
    }, 5000);

    $('.right').click(function(){
        i++;
        if (i == background.length) i = 0; 
        next();  
    });

    $('.left').click(function(){
        i--;
        if (i == -1) i = background.length-1;  
        next();
    });

    function next() {
        slider.fadeOut(500, function(){ 
            slider.css('background-color', background[i]); 
        }); 
        slider.fadeIn(2000);
        clearInterval(timer);
        timer = setInterval(function() {
            i++;
            if (i == background.length) i = 0; 
            slider.fadeOut(500, function(){
                slider.css('background-color', background[i]); 
            }); 
            slider.fadeIn(2000);  
        }, 5000);
    }
});